<script setup lang="ts">
import type { EmployeeVO } from '#/api/company/audience/model';

import { onMounted } from 'vue';

// import { useAccess } from '@vben/access';
import { DictEnum } from '@vben/constants';
import { IconifyIcon, VbenIcon } from '@vben/icons';

import { Descriptions, DescriptionsItem, Tooltip } from 'ant-design-vue';

import { renderDict } from '#/utils/render';

const props = withDefaults(defineProps<{ info: Props; rowKey?: string }>(), {
  rowKey: 'id',
});

const emit = defineEmits<{
  click: [string];
  delete: [any];
  edit: [any];
  preview: [any];
  reload: [any];
}>();

interface Props extends EmployeeVO {
  active: boolean;
}

// const info = ref<EmployeeVO>({ ...props.info });
// watch(
//   () => props.info,
//   (val) => {
//     if (val) {
//       console.log(val);
//       info.value = { ...val };
//     }
//   },
//   { deep: true },
// );

onMounted(() => {
  // if (props.info) {
  //   info.value = { ...props.info };
  // }
});

/**
 * TODO: 这里要优化 事件没有用到
 */
function handleClick() {
  const idKey = props.rowKey as keyof EmployeeVO;
  emit('click', props.info[idKey]);
}
</script>

<template>
  <div
    :class="{
      'border-primary': info.active,
      'bg-active': info.active,
    }"
    class="cursor-pointer rounded-lg border-[1px] border-solid p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg"
    @click.stop="handleClick"
  >
    <Descriptions :column="1" size="small">
      <template #title>
        <div class="flex items-center gap-1">
          <IconifyIcon icon="majesticons:user" />
          <span :class="{ 'text-primary': info.active }">
            {{ info.name }}
          </span>
          <Tooltip title="主联系人">
            <VbenIcon
              v-if="info.isMaster === 1"
              icon="streamline:star-badge-remix"
              class="ml-[5px] inline-block text-[15px] text-[orange]"
            />
          </Tooltip>
        </div>
      </template>
      <!--<template #extra>-->
      <!--  <span class="inline-block text-yellow-500">-->
      <!--    <IconifyIcon icon="basil:user-solid" />-->
      <!--  </span>-->
      <!--</template>-->
      <DescriptionsItem label="公司">
        {{ info.companyName }}
      </DescriptionsItem>
      <DescriptionsItem label="部门">
        <component
          :is="
            renderDict(info.departmentId, DictEnum.AUDIENCE_DEPARTMENT, true)
          "
        />
      </DescriptionsItem>
      <DescriptionsItem label="职位">
        <component
          :is="renderDict(info.positionId, DictEnum.AUDIENCE_POSITION, true)"
        />
      </DescriptionsItem>
    </Descriptions>
  </div>
</template>

<style lang="scss" scoped>
.bg-active {
  background-color: hsl(var(--primary) / 15%);
}

:deep(.ant-descriptions .ant-descriptions-header) {
  margin-bottom: 12px !important;
}

:deep(.ant-descriptions-item) {
  padding-bottom: 8px !important;
}
</style>
